<template>
  <n-h1>QBot-GNN MVP-0</n-h1>
  <n-p>Health: {{ health }}</n-p>
  <n-h1>QBot-GNN 实时行情</n-h1>
  <n-p>股票代码：{{ tick.code }}</n-p>
  <n-p>最新价：{{ tick.price }}</n-p>
  <n-p>成交量：{{ tick.vol }}</n-p>
  <n-button @click="connectWs">连接行情</n-button>
  <n-h1>轮动行情 + 做 T 信号</n-h1>
  <n-data-table :columns="cols" :data="ticks" :pagination="false" />
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
const health = ref('')
const ticks = ref([])

const cols = [
  { title: '代码', key: 'code' },
  { title: '价格', key: 'price' },
  { title: '信号', key: 'signal.side' },
  { title: '理由', key: 'signal.reason' }
]

onMounted(async () => {
  health.value = await fetch('/api/healthz').then(r => r.json()).then(j => j.version)
})
function connectWs() {
    const ws = new WebSocket('ws://localhost:8001/api/market/ws/tick')
    ws.onmessage = (ev) => {
    const d = JSON.parse(ev.data)
    const idx = ticks.value.findIndex((i: any) => i.code === d.code)
    idx >= 0 ? Object.assign(ticks.value[idx], d) : ticks.value.push(d)
    }
}
</script>
